import React from 'react'
import Gallery from '../ui-components/gallery'
import style from './style'
import Code from './Code'

const path = process.env.NODE_ENV === 'production'? './static/images/test': './static/src/images/test'

const images = [
  'test-1',
  'test-2',
  'test-3',
  'test-4'
].map(img => {
  return {
    name: img,
    thumbnail: `${path}/${img}.jpg`
  }
})

export default
class extends React.Component {

  state = {
    images
  }

  // 读取指定index的大图
  handleLoad(i) {
    setTimeout(() => {
      this.setState({
        images: this.state.images.map((img, index) => {
          if (i == index) {
            return {
              ...img,
              large: `${path}/${img.name}__large.jpg`
            }
          }
          return img
        })
      })
    }, 1000)
  }

  render() {
    return (
      <div className={style.root}>
        <Code>{'<Gallery/>'}</Code>
        <div>
          <Gallery
            onLoad={::this.handleLoad}
            images={this.state.images}
          />
        </div>
      </div>
    )
  }
}
